import React from 'react';
import { Row, Col, Space, Input, InputNumber } from 'antd';

const acceptanceNameRegExp = /^(.*?)第(\d*)期第(\d*)批$/; // 验收名称正则

/**
 * 解析验收名称字符串
 */
export function parseAcceptanceNameStr(text) {
    return (text?.match?.(acceptanceNameRegExp) ?? ['', '', '', '']).slice(1);
}

/**
 * 转换成验收名称字符串
 */
export function toAcceptanceNameStr(name, phase, batch) {
    return `${name ?? ''}第${phase ?? ''}期第${batch ?? ''}批`;
}

/**
 * 验收资料名称输入框
 */
function AcceptanceNameInput(props) {
    const { style, disabled, value, onChange } = props;

    const [name, phase, batch] = parseAcceptanceNameStr(value);

    const renderInputNumber = (props) => {
        return (
            <InputNumber
                controls={false}
                min={1}
                precision={0}
                placeholder="请输入数字"
                disabled={disabled}
                {...props}
            />
        );
    };

    return (
        <Row style={style} gutter={8}>
            <Col flex={1}>
                <Input disabled placeholder="请输入云区域名称" value={name} />
            </Col>
            <Col>
                <Space>
                    <span>第</span>
                    {renderInputNumber({
                        value: phase,
                        onChange(value) {
                            onChange(toAcceptanceNameStr(name, value, batch));
                        },
                    })}
                    <span>期</span>
                </Space>
            </Col>
            <Col>
                <Space>
                    <span>第</span>
                    {renderInputNumber({
                        value: batch,
                        onChange(value) {
                            onChange(toAcceptanceNameStr(name, phase, value));
                        },
                    })}
                    <span>批</span>
                </Space>
            </Col>
        </Row>
    );
}

export default AcceptanceNameInput;
